@import 'mixins/clear.less';
// 最外层的包裹元素
#wrapper{

  // 头部开始
  #header{
    // 上半部分
    .headTop{
      background: #eaeaea;
      height: 30px;
      // 版心元素
      .headTopMain{
        width: 1200px;
        margin: 0 auto;
        line-height: 30px;
        .clearfix();
        // 左侧
        .left{
          float: left;
          h5{
            float: left;
            margin-right: 5px;
          }
          p{
            float: left;
            a{
              &:first-child{
                border-right: 1px solid #b3aeae;
                padding-right: 5px;
              }
            }
          }
        }
        // 右侧
        .right{
          float: right;
          nav{
            font-size: 0px;
            a{
              margin-right: 10px;
              padding-right: 10px;
              font-size: 12px;
              border-right: 1px solid #b3aeae;
              &:last-child{
                border: none;
                margin-right: 0px;
                padding-right: 0px;
              }
            }
          }
        }
      }
    }
    // 下半部分
    .headBottom{
      // 版心元素
      .headBottomMain{
        width: 1200px;
        margin: 0 auto;
        .clearfix();
        // logo
        .logo{
          float: left;
          a{
            img{
              width: 175px;
              height: 56px;
              margin: 25px 45px;
            }
          }
        }
        // 搜索框
        .search{
          float: right;
          margin-top: 35px;
          input{
            // 文本框
            &:first-child{
              float: left;
              box-sizing: border-box;
              width: 490px;
              height: 32px;
              padding: 0 4px;
              border: 3px solid #ea4a36;
            }
            // 提交按钮
            &:last-child{
              width: 68px;
              height: 32px;
              color:#fff;
              background: #ea4a36;
              border: none;
            }
            &::-webkit-input-placeholder{
              color: yellowgreen;
            }
          }
        }
      }
    }
  }
  // 头部结束

  // 分类导航开始
  #navWrap{
    // 版心元素
    .navWrapMain{
      width: 1200px;
      margin: 0 auto;
      border-bottom: 2px solid #e1251b;
      .clearfix();
      a{
        margin: 0 22px;
        font-size: 16px;
        color: #333;
        float: left;
        line-height: 50px;
        &:first-child{
          width: 210px;
          height: 50px;
          background: #e1251b;
          color: #fff;
          font-size: 14px;
          font-weight: bold;
          float: left;
          text-align: center;
          line-height: 50px;
        }
      }
    }
  }
  // 分类导航结束

  // 内容区域开始
  #content{
    // 版心元素
    .contentMain{
      width: 1200px;
      margin: 15px auto 0 auto;
      // 路径导航
      #navPath{
        padding: 9px 15px 9px 0;
        font-size: 0;
        a{
          font-size: 12px;
        }
        i{
          padding: 0 5px;
          font-size: 12px;
        }
      }
      // 中间区域
      #center{
        margin: 5px 0 15px;
        .clearfix();
        // 左侧放大镜
        .left{
          width: 400px;
          float: left;
          // 上边
          .leftTop{
            width: 400px;
            position: relative;
            // 小图
            #smallPic{
              width: 400px;
              height: 400px;
              border: 1px solid #dfdfdf;
              position: relative;
              // 小图片
              img{}
              // 蒙版
              .mask{
                width: 200px;
                height: 200px;
                background-color: rgba(255, 255, 255, .5);
                border: 1px solid #ddd;
                position: absolute;
                left: 0;
                top: 0;
              }
            }
            // 大图
            #bigPic{
              width: 400px;
              height: 400px;
              border: 1px solid #ddd;
              left: 420px;
              top: 0;
              position: absolute;
              overflow: hidden;
              // 大图片
              img{
                width: 800px;
                height: 800px;
                position: absolute;
                left: 0;
                top: 0;
              }
            }
          }
          // 下边
          .leftBottom{
            width: 400px;
            margin-top: 5px;
            a{
              float: left;
              width: 10px;
              height: 54px;
              border: 1px solid #ccc;
              background: #ebebeb;
              line-height: 54px;
              &:first-child{
                margin-right: 4px;
              }
            }
            .picList{
              width: 372px;
              height: 56px;
              float: left;
              overflow: hidden;
              position: relative;
              ul{
                white-space: nowrap;
                font-size: 0;
                position: absolute;
                transition: 0.5s;
                li{
                  width: 50px;
                  height: 50px;
                  border: 1px solid #ccc;
                  padding: 2px;
                  margin-right: 20px;
                  display: inline-block;
                  img{
                    width: 50px;
                    height: 50px;
                  }
                }
              }
            }
          }
        }
        // 右侧商品详情
        .right{
          width: 700px;
          float: right;
          .rightTop{
            h3{
              font-size: 14px;
              line-height: 21px;
              margin-top: 15px;
            }
            > p{
              color: #e12228;
              margin-top: 15px;
            }
            .priceWrap{
              margin-top: 10px;
              line-height: 28px;
              background: #fee9ec;
              padding: 7px;
              .priceTop{
                .clearfix();
                > span{
                  margin-right: 15px;
                  float: left;
                }
                .price{
                  float: left;
                  color: #cc1122;
                  > span{
                    font-size: 16px;
                    float: left;
                  }
                  p{
                    font-size: 24px;
                    float: left;
                    font-weight: bold;
                  }
                  i{
                    font-size: 12px;
                    float: left;
                  }
                }
                > p{
                  float: right;
                }
              }
              .priceBottom{
                .clearfix();
                > span{
                  float: left;
                  margin-right: 15px;
                }
                p {
                  width: 520px;
                  line-height: 28px;
                  float: left;
                  > span{
                    color: #999;
                    &:first-child{
                      background: #c81623;
                      padding: 3px;
                      color: #fff;
                    }
                  }
                }
              }
            }
            .support{
              margin-top: 10px;
              line-height: 28px;
              .clearfix();
              > span{
                margin-right: 15px;
                float: left;
              }
              > p{
                float: left;
                width: 520px;
                color: #999;
              }
            }
            .address{
              border-bottom: 1px solid #ededed;
              padding-bottom: 5px;
              margin-top: 10px;
              line-height: 28px;
              .clearfix();
              > span{
                margin-right: 15px;
                float: left;
              }
              > p{
                float: left;
                width: 520px;
                color: #999;
              }
            }
          }
          .rightBottom{
            margin-top: 10px;
            line-height: 28px;
            .choose{
              .clearfix();
              .mark{
                height: 30px;
                background: snow;
                border: 1px solid #ddd;
                padding: 0 20px;
                margin-right: 20px;
                text-align: center;
                line-height: 30px;
                float: left;
                a{
                  color: red;
                  margin-left: 30px
                }
              }
            }
            .chooseWrap{
              dl{
                margin-top: 13px;
                margin-bottom: 13px;
                .clearfix();
                dt{
                  margin-right: 15px;
                  float: left;
                }
                dd{
                  margin-right: 5px;
                  color: #666;
                  line-height: 24px;
                  padding: 2px 14px;
                  border-top: 1px solid #eee;
                  border-left: 1px solid #eee;
                  border-right: 1px solid #bbb;
                  border-bottom: 1px solid #bbb;
                  float: left;
                }
              }
            }
            .addCart{
              .clearfix();
              .count{
                width: 55px;
                margin-right: 15px;
                position: relative;
                float: left;
                input{
                  width: 38px;
                  height: 37px;
                  border: 1px solid #ddd;
                  color: #555;
                }
                a{
                  width: 15px;
                  height: 18px;
                  color: #666;
                  background: #f1f1f1;
                  position: absolute;
                  right: 1px;
                  text-align: center;
                  line-height: 18px;
                  border: 1px solid #ddd;
                  &:first-child{
                    top: 0;
                  }
                  &:last-child{
                    top: 20px;
                    border-top: 0;
                  }
                }
              }
              button{
                padding-left: 25px;
                padding-right: 25px;
                height: 36px;
                font-size: 16px;
                background: #e1251b;
                color: #fff;
                border: none;
                float: left;
              }
            }
          }
        }
      }
      // 商品详情
      .goodsDetailWrap{
        width: 1200px;
        margin: 30px auto 0;
        .clearfix();
        // 左边的侧边栏
        .leftAside{
          width: 210px;
          border: 1px solid #ccc;
          .clearfix();
          float: left;
          // 上边
          .asideTop{
            .clearfix();
            h4{
              width: 105px;
              height: 40px;
              background: #fff;
              float: left;
              text-align: center;
              line-height: 40px;
              border-bottom: 1px solid #ccc;
              border-top: 3px solid white;
              &.active{
                border-top: 3px solid #e1251b;
                width: 105px;
                border-bottom: none;
              }
            }
          }
          // 下边
          .asideContent{
            padding: 10px;
            div{
              display: none;
              &.active{
                display: block;
                ul{
                  &.goodsList1{
                    li{
                      width: 50%;
                      border-bottom: 1px dashed #ededed;
                      line-height: 28px;
                      float: left;
                    }
                  }
                  &.goodsList2{
                    margin: 5px 0 15px;
                    li{
                      border-bottom: 1px solid #ededed;
                      img{
                        width: 152px;
                      }
                      span{}
                      p{
                        font-size: 16px;
                        color: #c81623;
                      }
                      .button{
                        margin-top: 5px;
                        margin-bottom: 5px;
                        text-align: center;
                        a{
                          color: #8c8c8c;
                          padding: 2px 14px;
                          line-height: 18px;
                          border: 1px solid #8c8c8c;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        // 右边的详情
        .rightDetail{
          width: 980px;
          float: left;
          margin-left: 8px;
          // 选择搭配
          .chooseBox{
            border: 1px solid #ddd;
            margin-bottom: 15px;
            h4{
              border-bottom: 1px solid #ddd;
              background: #f1f1f1;
              color: #333;
              padding: 5px 0 5px 15px;
            }
            .listWrap{
              height: 170px;
              padding-top: 10px;
              .left{
                width: 127px;
                height: 165px;
                position: relative;
                float: left;
                text-align: center;
                img{
                  width: 87px;
                  margin: 0 auto;
                }
                p{
                  color: #c81623;
                  font-size: 16px;
                }
                i{
                  position: absolute;
                  top: 48px;
                  right: -25px;
                  font-size: 16px;
                }
              }
              .middle{
                width: 668px;
                height: 165px;
                float: left;
                text-align: center;
                li{
                  width: 127px;
                  margin-left: 20px;
                  margin-right: 20px;
                  float: left;
                  img{
                    width: 120px;
                    height: 130px;
                  }
                  >span{}
                  div{
                    input{}
                    span{}
                  }
                }
              }
              .right{
                width: 153px;
                height: 165px;
                padding-left: 25px;
                border-left: 1px solid #ddd;
                float: left;
                div{
                  margin-top: 10px;
                  margin-bottom: 10px;
                }
                p{
                  font-weight: bold;
                  margin-bottom: 10px;
                }
                i{
                  color: #b1191a;
                  font-size: 16px;
                  margin-bottom: 10px;
                }
                button{
                  padding: 10px 25px;
                  font-size: 16px;
                  color: #fff;
                  background: #e1251b;
                  border: none;
                }
              }
            }
          }

          // 选项卡
          .bottomDetail{
            // 菜单
            .tabBtns{
              background: #ededed;
              .clearfix();
              li{
                border-top: 1px solid #ddd;
                border-bottom: 1px solid #ddd;
                border-right: 1px solid #ddd;
                background: #fff;
                height: 40px;
                padding-left: 11px;
                padding-right: 11px;
                float: left;
                text-align: center;
                line-height: 40px;
                &:first-child{
                  border-left: 1px solid #ddd;
                }
                &.active{
                  background: red;
                  a{
                    color: #fff;
                  }
                }
              }
            }
            // 内容
            .tabContents{
              div{
                padding-left: 20px;
                line-height: 25px;
                display: none;
                &.active {
                  margin: 10px 0;
                  display: block;
                }
              }
            }
          }
        }
      }
    }
  }
  // 内容区域结束

  // 右侧侧边栏开始
  .rightAside{
    width: 300px;
    height: 100%;
    background: #7a6e6e;
    transition: 0.5s;
    position: fixed;
    top: 0;
    &.asideClose{
      right: -294px;
    }
    &.asideOpen{
      right: 0;
    }
    // 按钮区域
    .btns{
      width: 35px;
      height: 35px;
      background: #7a6e6e;
      border-radius: 5px 0 0 5px;
      left: -29px;
      background-size: 35px 35px;
      position: absolute;
      &.btnsClose{
        background-image: url("../images/list.png");
      }
      &.btnsOpen{
        background-image: url("../images/cross.png");
      }
    }
    // 侧边栏内容区域
    .content{
      width: 294px;
      background: bisque;
      position: absolute;
      left: 6px;
      top: 0;
      bottom: 0;
      z-index: 50;
    }
    // 侧边导航区域
    .navList{
      position: absolute;
      left: -29px;
      top: 50%;
      transform: translateY(-50%);
      li{
        width: 35px;
        height: 35px;
        position: relative;
        p{
          width: 35px;
          height: 35px;
          background: #7a6e6e;
          background-image: url("../images/toolbars.png");
          background-position: -87px -174px;
          transition: 0.5s;
        }
        i{
          width: 62px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          position: absolute;
          left: 35px;
          top: 0;
          background: #7a6e6e;
          transition: 0.5s;
        }
        &:hover{
          p{
            background-color: pink;
          }
          i{
            background-color: pink;
            left: -62px;
          }
        }
      }
    }
  }
  // 右侧侧边栏结束
}